<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="imageData" :current="current.value" field="content">
      <!-- 添加 autoplay、interval 和 duration 属性 -->
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper" autoplay :interval="3000" :duration="500">
        <swiper-item v-for="(item, index) in imageData" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 滚动通知 -->
    <view class="notice-container">
      <uni-icons type="sound-filled" size="20" color="#fff" />
	  <div class="notice-swiper-wrapper" >
		  <swiper class="notice-swiper" vertical autoplay :interval="3000" :duration="500">
			<swiper-item v-for="(notice, index) in noticeList" :key="index">
			  <view class="notice-item">
				<text>{{ notice }}</text>
			  </view>
			</swiper-item>
		  </swiper>
	  </div>
    </view>

    <!-- 宫格组件 -->
    <uni-section title="系统管理" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="person-filled" size="30"></uni-icons>
            <text class="text">用户管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="staff-filled" size="30"></uni-icons>
            <text class="text">角色管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="color" size="30"></uni-icons>
            <text class="text">菜单管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="settings-filled" size="30"></uni-icons>
            <text class="text">部门管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="heart-filled" size="30"></uni-icons>
            <text class="text">岗位管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="bars" size="30"></uni-icons>
            <text class="text">字典管理</text>
          </view>
        </uni-grid-item> 
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="gear-filled" size="30"></uni-icons>
            <text class="text">参数设置</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="chat-filled" size="30"></uni-icons>
            <text class="text">通知公告</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="wallet-filled" size="30"></uni-icons>
            <text class="text">日志管理</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';

// 获取全局配置
const { appContext } = getCurrentInstance();
const $tab = appContext.config.globalProperties.$tab;
const $modal = appContext.config.globalProperties.$modal;

const imageData = [
  {
    image: '/static/images/banner/banner01.jpg'
  },
  {
    image: '/static/images/banner/banner02.jpg'
  },
  {
    image: '/static/images/banner/banner03.jpg'
  }
]; 
const current = ref(0);
const swiperDotIndex = ref(0);
const clickBannerItem = (item) => {
  console.info(item)
};

const changeSwiper = (e) => {
  current.value = e.detail.current;
};

const changeGrid = (e) => {
  $modal.showToast('模块建设中~')
};

// 滚动通知数据
const noticeList = ref([
  '这是第一条滚动通知',
  '这是第二条滚动通知',
  '这是第三条滚动通知'
]);
</script>

<style lang="scss">
 /* #ifndef APP-NVUE */
 page {
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     background-color: #fff;
     min-height: 100%;
     height: auto;
   }
 
   view {
     font-size: 14px;
     line-height: inherit;
   }
 
   /* #endif */
 
   .text {
     text-align: center;
     font-size: 26rpx;
     margin-top: 10rpx;
   }
 
   .grid-item-box {
     flex: 1;
     /* #ifndef APP-NVUE */
     display: flex;
     /* #endif */
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 15px 0;
   }
 
   .uni-margin-wrap {
     width: 690rpx;
     width: 100%;
     ;
   }
 
   .swiper {
     height: 300rpx;
   }
 
   .swiper-box {
     height: 150px;
   }
 
   .swiper-item {
     /* #ifndef APP-NVUE */
     display: flex;
     /* #endif */
     flex-direction: column;
     justify-content: center;
     align-items: center;
     color: #fff;
     height: 300rpx;
     line-height: 300rpx;
   }
 
   @media screen and (min-width: 500px) {
     .uni-swiper-dot-box {
       width: 400px;  
       /* #ifndef APP-NVUE */
       margin: 0 auto;
       /* #endif */
       margin-top: 8px;
     }
 
     .image {
       width: 100%;
     }
   }

	/* 滚动通知容器样式 */
	.notice-container {
		display: flex;
		align-items: center;
		background-color: #007aff;
		height: 40px;
		padding: 0 10px;
		margin: 10px 0;
	}

	/* 小喇叭图标样式 */
	uni-icons {
		margin-right: 10px;
	}

	/* 新增的包裹 swiper 的容器样式 */
	.notice-swiper-wrapper {
		flex: 1;
		height: 40px;
	}

	/* 滚动通知样式 */
	.notice-swiper {
	  height: 100%;
	  line-height: 40px;
	  font-size: 14px;
	  color: #fff;
	}

	.notice-item {
	  padding: 0 10px;
	}
</style>